<template>
	<view class='orders'>
		<view class='condition dFlex jAround_aCenter'>
			<u-search v-model="keyword" @search="search" @custom="search" :placeholder="$t('orders.placeholder1')"
				:showAction='false'></u-search>
			<!-- <u-icon name="arrow-down" :label="$t('orders.label1')" labelPos='left' style="margin-left: 15px;"></u-icon> -->
		</view>
		<view class='list'>
			<view class="part">
				<view class='part_status'>
					{{statusText[status]}} <text>( {{data_count}} Items)</text>
				</view>
				<view class="part_list" v-if='dataLists.length>0'>
					<view class='shopOne'  v-for="(item,index) in dataLists" :key='index'>
						<view class='orderId' @click='lookDetail(item)'>{{$t('orderDetail.orderId')}} <text>{{item.order_sn}}</text></view>
						<view class='list2'>
							<view class="shopOne dFlex jStart_aStart" v-for="(goods,index) in item.goodslsit" :key='index'>
								<view class='shopImg imgPublic' @click="goDetail(goods)">
									<image :src="goods.image" mode="widthFix"></image>
								</view>
								<view class='shopInfo'>
									<view class='shopName' v-if="goods.goods_name">{{goods.goods_name}}</view>
									<view class='shopName' v-if="goods.spec_key_name">{{goods.spec_key_name}}</view>
									<view class='shopName' style="font-size: 12px;">{{goods.unit}}</view>
									<view class='shopPrice dFlex jStart_aCenter'>
										<view class='newPrice'>SAR<text>{{goods.final_price}}</text></view>
										<!-- <view class='oldPrice'>4949</view> -->
										<view class="carIcon dFlex jCenter_aCenter" style="margin-left: 20px;" @click.stop="addCart(goods)">
											<u-icon name="../static/menu5_1.png" size='20px'></u-icon>
										</view>
									</view>
									
									<view>{{$t('goodDetail.count')}} x {{goods.goods_num}}</view>
									<view v-if="item.order_status==4">
										<view style="margin-top:10rpx;display: flex;">
											<u-button @click="comment(item.order_id,goods.rec_id)" size="mini"
												 color='#f8e801'>{{$t('orderDetail.post_comment')}}</u-button>
										</view>
									</view>
									
								</view>
							</view>
						</view>
						
						<view class='shop_desc'>
							
							<view class='status desc dFlex jBetween_aCenter' @click='lookDetail(item)'>
								<!-- 订单状态：green  orange -->
								<text class='showStatus orange'>
									{{statusText[status]}}
								</text>
								
								<u-icon name="arrow-right" style="margin-left: 12px;"></u-icon>
							</view>
							<view class='desc dFlex jBetween_aCenter' v-if="item.status==3||item.status==4">
								<view v-if="item.shiplists">
									<view v-for="(item2,index2) in item.shiplists" style="margin-top: 30rpx;">
										<view style="font-size: 22rpx;color:#aaa">{{item2.create_time}}</view>
										<view style="font-size: 26rpx;color:#999;margin-top: 10rpx;">{{item2.note}}</view>
									</view>
								</view>
								
							</view>
							<view class='status' style="margin-top: 10px;font-size: 30rpx;">
								<!-- 订单状态：green  orange -->
								<text >
									{{$t('orderDetail.order_amount')}} 
								</text>
								<text style="margin-left: 10px;">
									SAR
								</text>
								 <text class='showStatus orange' style="margin-left: 10px;;">{{item.order_amount}}</text>
							</view>
							
						</view>
						<view class='shop_desc'>
							<view class='opBtn dFlex jBetween_aCenter'  style="margin-top:10px;">
								<view class='btns' v-if="item.status==1">
									<view class='saveBtn' style="color:#000" @click='payorder(item)'>{{$t('pay.dopay')}}</view>
								</view>
								<u-icon v-if="item.status==1" @click='cancelorder(item.order_id)' name="close-circle" color="#f8e801" size="28"
									style="margin-left: auto;margin-right:12px"></u-icon>
								<u-icon v-if="item.status==4" @click='delorder(item.order_id)' name="trash" color="#f8e801" size="28"></u-icon>
								<view class='btns' v-if="item.status==3">
									<view class='saveBtn' style="color:#000" @click='endorder(item.order_id)'>{{$t('orders.orderconfirm')}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<u-empty v-else :text='$t("coupon.empty")' mode="data" >
				</u-empty>
			</view>
			<!-- <view class="part">
				<view class='part_status'>
					Completed
				</view>
				<view class="part_list">
					<view class='shopOne' v-for="(item,index) in 2" :key='index'>
						<view class='orderId'>Order ID <text>1235678910</text></view>
						<view class='shopImg imgPublic'>
							<image src="../static/logo.png" mode="widthFix"></image>
						</view>
						<view class='shop_desc'>
							<view class='desc dFlex jBetween_aCenter'>
								<text>今日送达今日送达今日送达今日送达今日送达</text>
								<u-icon name="arrow-right" style="margin-left: 12px;"></u-icon>
							</view>
							<view class='status'>
								<text class='showStatus orange'>dispatched</text>
								<text>On time</text>
							</view>
						</view>
					</view>
				</view>
			</view> -->
			<view class='seat'></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				status: 1,
				dataLists: [],
				page: 1,
				loadStatus: 'loadmore',
				data_count: 0,
				statusText: [this.$t('orders.orderStatus1'), this.$t('orders.orderStatus2'), this.$t(
					'orders.orderStatus3'), this.$t('orders.orderStatus4'), this.$t('orders.orderStatus5')],
			};
		},
		onLoad(options) {
			this.status = options.status ?? 1
			this.init();
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: this.$t('pages.orders'),
			})
		},
		onPullDownRefresh() {
			this.dataLists =[];
			this.page = 1;
			this.init()
			
			uni.stopPullDownRefresh(); // 停止下拉刷新动画
		},
		onReachBottom() {
			this.init();
		},
		methods: {
			addCart(item) {
				this.$tools.addCart(item)
			},
			async delorder(id) {
				uni.showModal({
					title: this.$t('address.tips'),
					content: this.$t('address.tipContent'),
					confirmText: this.$t('operateBtn.sureBtn'),
					cancelText: this.$t('operateBtn.cancelBtn'),
					success: async (op) => {
						if (op.confirm) {
							const result = await this.$api('/order/del_order', {
								id: id,
							});
							if (result) {
								uni.showToast({
									title: this.$t('address.tipResult'),
									icon: "success"
								})
								this.dataLists = [];
								this.page = 1;
								this.loadStatus = 'loadmore'
								this.init()
							}
						}
					}
				})
			}, 
			async cancelorder(id) {
				const result = await this.$api('/order/cancel_order', {
					id: id,
				});
				if (result) {
					console.log(result);
					uni.showToast({
						title: result,
						icon: "success"
					})
					this.dataLists = [];
					this.page = 1;
					this.loadStatus = 'loadmore'
					this.init()
				}
			}, 
			async endorder(id) {
				const result = await this.$api('/order/orderconfirm', {
					id: id,
				});
				console.log(result);
				if (result) {
					
					uni.showToast({
						title: result,
						icon: "success"
					})
					this.dataLists = [];
					this.page = 1;
					this.loadStatus = 'loadmore'
					this.init()
				}
			}, 
			payorder(item) {
				uni.navigateTo({
					url: '/pages/pay?id=' + item.order_id+'&amount='+item.order_amount
				})
			},
			comment(order_id,rec_id) {
				uni.navigateTo({
					url: '/pages/comment?id=' + order_id + '&rec_id=' + rec_id
				})
			},
			// 查看订单详情
			lookDetail(item) {
				uni.navigateTo({
					url: './orderDetail?id=' + item.order_id
				})
			},
			
			goDetail(item) {
				uni.navigateTo({
					url: './goodDetail?id=' + item.goods_id
				})
			},
			search() {
				this.dataLists = [];
				this.page = 1;
				this.loadStatus = 'loadmore'
				this.init()
			},
			async init() {
				const {
					dataLists,
					page,
					loadStatus,
					count
				} = await this.$tools.loadingFun('/order/orderlist', {
					status: this.status,
					keyword: this.keyword
				}, this.dataLists, this.page, this.loadStatus);
				this.dataLists = dataLists;
				this.page = page;
				this.loadStatus = loadStatus;
				this.data_count = count
			},
		}
	}
</script>

<style lang="scss">
	.btns {
		.saveBtn {
			width: 100%;
			background: $main;
			color: white;
			text-align: center;
			border-radius: 4px;
			padding: 10px 0;
		}
	
		width: 100%;
		padding: 12px;
		background: white;
		box-sizing:border-box;
	}
	.list2 {
		.shopOne {
			.shopInfo {
				.shopPrice {
					.oldPrice {
						font-size: 12px;
						margin-left: 12px;
						color: #7e859b;
					}
	
					.newPrice {
						font-weight: bold;
	
						text {
							font-size: 16px;
							display: inline-block;
							margin-left: 5px;
						}
					}
	
					width:100%;
					margin:6px 0;
				}
	
				.shopName {
					width: 100%;
					display: -webkit-box;
					/* 设置为WebKit内核的弹性盒子模型 */
					-webkit-box-orient: vertical;
					/* 垂直排列 */
					-webkit-line-clamp: 2;
					/* 限制显示两行 */
					overflow: hidden;
					/* 隐藏超出范围的内容 */
					text-overflow: ellipsis;
					/* 使用省略号 */
				}
	
				width:calc(100% - 112px);
			}
	
			.shopImg {
				width: 100px;
				margin-right: 12px;
			}
	
			width:100%;
			padding:15px;
			box-sizing: border-box;
			border-bottom: 5px solid #f7f7fa;
		}
	
		width:100%;
		
	}
	.list {
		.part {
			.part_list {
				width: 100%;

				.shopOne {
					.shop_desc {
						.status {
							.showStatus {
								display: inline-block;
								margin-right: 4px;
							}

							.orange {
								color: $uni-color-warning;
							}

							.green {
								color: $main;
							}

							width:100%;
							font-size:13px;
						}

						.desc {
							text {
								display: inline-block;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}

							font-weight: bold;
							margin-bottom: 3px;
							font-size: 15px;
						}

						width:100%;
					}

					.shopImg {
						
						
						width: 120px;
						height: 120px;
						overflow: hidden;
						border-radius: 5px;

						image {
							display: inline-block;
							width: 100%;
							border-radius: 4px;
						}
					}

					.orderId {
						width: 100%;
						font-size: 12px;
						color: #999999;

						text {
							color: #666666;
							display: inline-block;
							margin-left: 6px;
						}
					}

					width: 100%;
					background: white;
					padding: 12px;
					border-radius: 5px;
					box-sizing: border-box;
					margin-bottom: 10px;
				}
			}

			.part_status {
				margin-bottom: 10px;
				font-weight: bold;
				font-size: 16px;
			}

			width: 100%;
			margin-bottom:12px;
		}

		width: 100%;
		padding: 12px;
		box-sizing: border-box;
	}

	.condition {
		width: 100%;
		padding: 8px 12px;
		box-sizing: border-box;
		background: white;
	}
</style>